<template>
  <div class="activity">
    <title-main title="党建活动列表"></title-main>
    <div class="table">
      <div class="table">
        <el-table :data="tableData" style="width: 95%" height="310px" ref="tableRef">
          <el-table-column prop="id" label="序号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="party" label="党支部"></el-table-column>
          <el-table-column prop="time" label="参与时间"></el-table-column>
          <el-table-column prop="num" label="人数"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { tableScoll } from '@/utils/index.js'
let myinterval = null
let tableRef = ref(null)
let tableData = ref([
  { id: '01', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '02', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '03', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '04', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '05', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '06', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '07', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' },
  { id: '08', party: 'xxx党支部', time: '2023.02.05', num: 26, type: 'xxx类型', name: 'xxx名称' }
])
onMounted(() => {
  myinterval = tableScoll(tableRef.value.$refs.bodyWrapper)
})
onBeforeUnmount(() => {
  if (myinterval) {
    clearInterval(myinterval)
    myinterval = null
  }
})
</script>
<style scoped lang="scss">
.activity {
  margin-top: 24px;
  .table {
    margin-top: 18px;
    width: 580px;
    // background-color: red;
  }
}
</style>
